<template>
  <div class="truck-basic-info">
    <div class="truck-basic-head">
      <div style="height: 60px;width: 60px;border-radius: 60px;overflow: hidden;">
        <el-image
          style="width: 100%;height: 100%;"
          fit="cover"
          :src="info.frontPhoto"
        ></el-image>
      </div>
      <div style="line-height: 30px;margin-left: 30px;">
        <div>号牌：{{info.plateNo}}</div>
        <div>年检日期：{{info.issueDate}}</div>
      </div>
    </div>
    <div class="truck-basic-body">
      <div>
        <div class="key">车牌号码</div>
        <div class="value">{{info.plateNo}}</div>
      </div>
      <div>
        <div class="key">车辆类型</div>
        <div class="value">{{info.vehicleType}}</div>
      </div>
      <div>
        <div class="key">所有人</div>
        <div class="value">{{info.owner}}</div>
      </div>
      <div>
        <div class="key">住址</div>
        <div class="value">{{info.address}}</div>
      </div>
      <div>
        <div class="key">使用性质</div>
        <div class="value">{{info.useCharacter}}</div>
      </div>
      <div>
        <div class="key">品牌型号</div>
        <div class="value">{{info.model}}</div>
      </div>
      <div>
        <div class="key">车辆识别代码</div>
        <div class="value">{{info.vin}}</div>
      </div>
      <div>
        <div class="key">发动机号码</div>
        <div class="value">{{info.engineNo}}</div>
      </div>
      <div>
        <div class="key">注册日期</div>
        <div class="value">{{info.registerDate}}</div>
      </div>
      <div>
        <div class="key">发证日期</div>
        <div class="value">{{info.issueDate}}</div>
      </div>
      <div style="text-indent: 10px;cursor: pointer;color: #F28A30;" @click="reback">
        返回
      </div>
    </div>
  </div>
</template>

<script>
  import {getCarInfo} from '@/api/workspace/work_order'
  export default {
    props:{
      data:Object,
      carId:Number
    },
    data() {
      return {
        info:{}
      }
    },
    created() {
      this.load()
    },
    methods:{
      load:function(){
        var that = this;
        // console.log(that.data);
        if(typeof that.data.carInfoId == 'undefined'){
          
          that.$router.push({
            path:'/main/settlement/pick_info',
            query:{
              id:that.$route.query.id
            }
          })
          return;
        }
        getCarInfo({id:that.data.carInfoId}).then(response => {
          var _data = response.data;
          // console.log(_data)
          if(_data.status == 200){
            that.info = _data.data;
          }else {
            that.$message({
              message:_data.msg,
              showClose:true,
              type:'error',
              offset:'100'
            })
          }
        }).catch(error => {
          alert('网络错误');
          console.log(error)
        })
      },
      reback:function() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="css" scoped>
  .truck-basic-info {
    width: 100%;
    height: 100%;
    background-color: rgba(246, 247, 248, 1);
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .truck-basic-head {
    margin-top: 5px;
    padding: 12px 18px;
    height: 60px;
    display: flex;
    background-color: white;
    font-weight: 500;
    color: #F28A30;
    font-size: 16px;
  }
  .truck-basic-body {
    margin-top: 5px;
    font-size: 14px;
    padding: 0 9px;
    background-color: white;
  }
  .truck-basic-body>div{
    height: 54px;
    line-height: 54px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    overflow: hidden;
    
  }
  .key {
    margin-left: 3px;
    color: rgba(51, 51, 51, 1);
    width: 98px;
    font-weight: 550;
    display: inline-block;
  }
  .value {
    margin-left: 3px;
    color: rgba(170, 170, 170, 1);
    display: inline-block;
    white-space: nowrap;
  }
</style>
